<template>
<el-dialog title="控件属性" :visible.sync="selfDlgVisible" :close-on-click-modal="false" @close="dialogClose">
    <div class="Grid" style="padding: 20px;border: 2px dashed #100;" >
       <div class="Row" :rowId="row.rowId"  v-for="(row,rowId) in projectParameters.ctrlProperties" :key="rowId" >
        <div class="Grid-cell" :type="item.type" :id="item.id"  v-for="(item,d) in row" :key="d" >
		  <PublicLabel :item="item" />
		  <PublicItem :item="item" @change="handleChange" /> 	  
        </div>
      </div> 
   </div>
  <div slot="footer" class="dialog-footer">
    <el-button size="mini" type="default-mini" @click="dialogClose">取 消</el-button>
    <el-button size="mini" type="primary-font-mini" @click="callBackOk">确 定</el-button>
  </div>
</el-dialog>
</template>
<script>
 import PublicItem from "../PublicItem/index";
 import PublicLabel from "../PublicLabel/index";	
export default {
  name: "controlproperties",
  display: "controlproperties",
  props: {
  projectParameters:{
	type:Object,
	required:true
  },
  dialogFormVisible:{
	type:Boolean,
	default:false
  }
  },
  order: 2,
  mounted() {
    var i;
    for(i=0;i<this.projectParameters.length;i++){
      var item = this.projectParameters[i];
      if(item.value){
        this.data[item.model]=item.value;
      }
    }
	//初始化data
	this.selfDlgVisible = this.dialogFormVisible;
  },
  components: {
    PublicItem,
	PublicLabel
  },
  data() {
    return {
	    data:{},
		selfDlgVisible:false
    }
  },
  methods: {
   handleChange(value, key) {
       debugger;
      this.data[key] = value;
   },
   callBackOk(){
     console.log('this.data:'+JSON.stringify(this.data));
     this.$emit("okEvent",this.projectParameters.id,this.data);
   },
   dialogClose(){
     this.$emit("update:dialogFormVisible1",false);
   }
  },
  watch:{
     dialogFormVisible(){
		this.visible = this.dialogFormVisible;
	 }
  }
 }
</script> 
<style>
.Grid {
  width: 100%;
}
.Row {
  display: flex;
  border: 1px dashed #000;
  height: 50px;
}
.Grid-cell {
  display: flex;
  /* flex: 1; */
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  pointer-events: none;
}	
</style>